<%--
  Created by IntelliJ IDEA.
  User: 86183
  Date: 2022/5/4
  Time: 15:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>更改个人信息</title>
    <link rel="shortcut icon" href="#"/>
    <style>
        body{
            color: white;
            background-color: black;
        }
        span{
            width: 200px;
            height: 5px;
            color: red;
            font-size: 4px;
        }
    </style>
</head>
<body>
    <form method="post" action="/theHomePageServlet" enctype="multipart/form-data">
        <input type="hidden" name="action" value="updateDetailUser"/>
        <input type="hidden" name="ownerId" id="ownerId" value=""/>
        <img border="0" src=""  id="picture" alt="picture" width="200" height="200"><br>
        更换头像:<input type="file" id="pictureUrl" name="pictureUrl"/><br>
        昵称:<input type="text" id="name" name="name" maxlength="10"/><br>
        <span id="checkName"></span>
        电话:<input type="text" id="telephone" name="telephone" maxlength="11"/></text><br>
        资产:  <input type="number" id="money" name="money" max="9999999999" min="0" step="0.01"/> 元<br>
        地区:<select id="district" name="district">
            <option value="" selected="selected"></option>
        </select>
        街区:<select id="street" name="street">
            <option id="beforeStreet" value="" selected="selected"></option>
        </select>
        详细地址:<input type="text" id="detailAddress" name="detailAddress" maxlength="255"/><br>
        <input type="submit"/>
    </form>
    <button id="return">返回</button>
</body>
<script>
    let params = new URLSearchParams(location.search);
    let name = params.get('name');
    let telephone=params.get('telephone');
    let district=params.get('district');
    let street=params.get('street')
    let address=params.get('address');
    let money=params.get('money');
    let picture=params.get("picture");


    document.getElementById("ownerId").value=getCookie("id");
    document.getElementById("name").value=getCookie("name");
    document.getElementById("telephone").value=telephone;
    document.getElementById("detailAddress").value=address;
    document.getElementById("beforeStreet").value=street;
    document.getElementById("money").value=money;
    if(picture!=null){
        document.getElementById("picture").src=picture;
    }else{
        document.getElementById("picture").src="http://localhost/picture/upload/图片.png"
    }


    function getCookie(name) {
        if (document.cookie.length > 0) {
            let start = document.cookie.indexOf(name + "=");
            if (start != -1) {
                start = start + name.length + 1;
                let end = document.cookie.indexOf(";", start);
                if (end == -1) end = document.cookie.length;
                return decodeURI(document.cookie.substring(start, end));
            }
        }
        return null;
    }
    document.getElementById("return").onclick=function (){
        window.location="Something.jsp";
    }
    document.getElementById("money").onblur=function (){
        let newMoney=parseFloat(document.getElementById("money").value);
        if(newMoney==null){return;}
        console.log(newMoney);
        console.log(parseFloat(money));
        if(newMoney<money){
            console.log("您的资产不能充值为较小值!!")
            alert("您的资产不能充值为较小值!!")
            document.getElementById("money").value=money;
        }
    }
    window.onload=function (){
        function addDistrict(){
            let json={
                "district" : null,
                "mode": "district"
            }
            let xhr=new XMLHttpRequest();
            xhr.open("post","http://localhost:80/updateHomePage",true);
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            xhr.responseType='json';
            xhr.send("json="+JSON.stringify(json));
            xhr.onreadystatechange=function(){
                if(xhr.status==200 && xhr.readyState==4){
                    let data=xhr.response;
                    console.log(data);
                    if(data["code"]==404){
                        console.log(data.state)
                    }else{
                        let districts=JSON.parse(data.data);
                        console.log(districts)
                        for(let i=0;i<districts.length;i++){
                            console.log(document.getElementById("district"))
                            document.getElementById("district").options.add(
                                new Option(districts[i]["name"],districts[i]["name"]));
                            if(districts[i]["name"]==district){
                                document.getElementById("district").options[districts[i]["name"]].selected=true;
                            }
                        }
                    }
                }
            }

        }
        function addStreet(){
            document.getElementById("district").onchange=function (){
                let obj=document.getElementById("district");
                let district = obj.options[obj.selectedIndex].text;
                console.log(district);
                let json={
                    "district":district,
                    "mode":"street"
                }
                let xhr=new XMLHttpRequest();
                xhr.open("post","http://localhost:80/updateHomePage",true);
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
                xhr.responseType='json';
                xhr.send("json="+JSON.stringify(json));
                xhr.onreadystatechange=function(){
                    if(xhr.status==200 && xhr.readyState==4){
                        let data=xhr.response;
                        console.log(data);
                        if(data["code"]==404){
                            console.log(data.state)
                        }else{
                            let districts=JSON.parse(data.data);
                            console.log(districts)
                            let obj=document.getElementById("street");
                            obj.options.length=0;
                            for(let i=0;i<districts.length;i++){
                                obj.options.add(new Option(districts[i]["name"],districts[i]["name"]));
                                if(districts[i]["name"]==district){
                                    document.getElementById("street").options[districts[i]["name"]].selected=true;
                                }
                            }
                        }
                    }
                }
            }
        }
        addDistrict();
        addStreet();
    }
    document.getElementById("name").onblur = function (){
        let userName = document.getElementById("name").value;
        if(userName.trim() == ""){
            return;
        }else{
            let xhr=new XMLHttpRequest();
            xhr.open("post","http://localhost:80/register",true);
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.responseType='json';
            xhr.send("userName="+JSON.stringify(userName));
            xhr.onreadystatechange=function(){
                if(xhr.status==200 && xhr.readyState==4){
                    let data = xhr.response;
                    console.log(data);
                    if(data["code"]==404){
                        document.getElementById("checkName").innerHTML=
                            "<text>"+data.state+"</text>"
                    }
                }
            }
        }
    }
    document.getElementById("name").onfocus=function(){
        document.getElementById("checkName").innerHTML='';
    }
</script>
</html>
